<template>
	<view>
		<cu-custom  bgColor="bg-black-two"  :isBack="true">
			<block slot="content">开票</block>
		</cu-custom>
		<view class="my-bg" style="padding-bottom: 20px;">
			<view v-for="(item,index) in invoiceList" :key="index" 
			@click="getInfo(item.id)" :ref="item.id" :class="selectInvoiceId == item.id ? 'selected-bg' : ''" >
				<view class="flex" style="padding: 15px 15px 0px 15px;">
					<view style="padding-right: 10px;">
						<text class="cuIcon-form"
							style="color: #00A99D;font-size: 30px; font-weight: bold;"></text>
					</view>
					<view>
						<view :class="selectInvoiceId == item.id ? 'selected-bg' : ''"
							style="color:#fff;font-size: 14px;">{{item.header}}</view>
						<view :class="selectInvoiceId == item.id ? 'selected-bg' : ''"
							style="color:gray;padding-top: 5px;">
							<text>纳税号：</text>
							<text>{{item.tax_id}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="padding flex justify-between" style="position: fixed; bottom: 0px;background-color: #FFFFFF;width: 100%;padding: 18px 30px;">
			<button  @click="linkToAddPage()" class="cu-btn round bg-green-two" style="width: 30%;font-size: 20px;height: 45px;">+</button>
			<button  @click="buyInvoice()" class="cu-btn round lines-green-two padding-lr-lg" style="width: 60%;height: 45px;color: #00A99D;">确认开票</button>
		</view>
		

		
		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog bg-white" style="height: 100px;width: 80%;">
				<view class="cu-bar justify-end">
					<view class="content text-black-two" style="font-size: 14px;">提示</view>
				</view>
				<!-- 提示3：橙色 #ff5722  错误2：红色 red   正确1：绿色 #00A99D  -->
				<view v-if="tipFlag == 3" class="text-black-two" style="font-size: 16px;color: #ff5722;">
					{{resText}}
				</view>
				<view v-else-if="tipFlag == 2" class="text-black-two" style="font-size: 16px;color: red;">
					{{resText}}
				</view>
				<view v-else="tipFlag == 1" class="text-black-two" style="font-size: 16px;color: #00A99D;">
					{{resText}}
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import $http from "@/common/request.js";
	var _self;
	export default {
		data() {
			return {
				sourceData:[],//要购买的模块信息
				invoiceList:[],//发票列表
				selectInvoiceId:0,//选中的发票ID
				modalName:null,
				resText:'',
				tipFlag:0,//提示flag(1:正确，2：错误，3：提示)
			}
		},
		onLoad(option) {
			_self = this;
			if(Object.keys(option).length != 0){
				this.sourceData = JSON.parse(option.moduleInfo);
			}
			//获取发票列表
			//this.getInitData();
		},
		onShow() {
			//获取发票列表
			this.getInitData();
		},
		methods: {
			// 获取发票列表
			async getInitData(){
				uni.showLoading({ title: '加载中...', mask: true });
				// 请求登录
				let [err,res] = await this.$http.get('invoiceList',{},{
					token:true,
					checkToken:true ,
				});
				uni.hideLoading();
				this.invoiceList = res.data.data;
			},
			//获取选中的发票ID
			getInfo(id){
				this.selectInvoiceId = id;
			},
			//跳转到添加发票页
			linkToAddPage(){
				let url = '/pages/center/fapiao/add';
				uni.navigateTo({
					url: url
				});
			},
			//购买模块并开票
			async buyInvoice(){
				if (this.selectInvoiceId == '') {
					this.showModalTip('请选择发票抬头',3);
					setTimeout(function () {
						_self.hideModalTip();
					}, 2000);
				} else {
					let paramsArray = {};
					paramsArray.userId = uni.getStorageSync("userinfo").id;//用户ID
					paramsArray.invoice_id = this.selectInvoiceId;//发票ID
					paramsArray.module_id = this.sourceData.id;//模块ID
					// 请求
					let [err,res] = await this.$http.post('buyModel',paramsArray,{
						token:true,
						checkToken:true ,
					});
					console.log(res.data.msg);
					if (res.data.msg == "success") {
						this.showModalTip('开票成功，您已成功购买此模块，积分成功',1);
						setTimeout(function () {
							_self.hideModalTip();
							uni.navigateBack({
								delta: 1
							});
						}, 2000);
					} else {
						this.showModalTip(res.data.msg,2);
						setTimeout(function () {
							_self.hideModalTip();
							uni.navigateBack({
								delta: 1
							});
						}, 2000);
					}
				}
				
			},
			//打开模态框
			showModalTip(val,isflag){
				this.modalName='Modal';
				this.resText = val;
				this.tipFlag = isflag;
			},
			//隐藏模态框
			hideModalTip(e) {
				this.modalName = null
				this.resText = '';
				this.selectInvoiceId = '';
			},
		}
	}
</script>

<style>

</style>
